<template>
  <el-row class="search">
    <el-form :model="searchModel" :inline="true" size="small" class="search1">
      <el-form-item label="策略名称">
        <el-input v-model.trim="searchModel.name" style="width: 160px" clearable></el-input>
      </el-form-item>
      <el-form-item label="生效时间">
        <el-date-picker v-model="searchModel.startDate" value-format="YYYY-MM-DD" style="width: 160px"
          clearable></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="reset">重置</el-button>
        <el-button type="primary" @click="searchSubmit">查询</el-button>
      </el-form-item>
      <!-- </el-form> -->
      <el-form-item>
        <el-divider direction="vertical"></el-divider>
      </el-form-item>

      <!-- <el-form :inline="true" size="small"> -->
      <el-form-item label="启用状态修改">
        <el-select v-model="status" clearable>
          <el-option value="1" label="启用"></el-option>
          <el-option value="0" label="停用"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleBatchStatusChange">修改</el-button>
      </el-form-item>
      <!-- </el-form> -->
      <el-form-item>
        <el-divider direction="vertical"></el-divider>
      </el-form-item>

      <!-- <el-form :inline="true" size="small"> -->
      <el-form-item>
        <el-button type="primary" :addPath="addPath" @click="$router.push(addPath)">新增</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary">复制</el-button>
      </el-form-item> -->
      <el-form-item>
        <el-button type="warning" @click="handleBatchDelete">批量删除</el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <el-table ref="tacticsListRef" :data="tacticsList" fit>
    <el-table-column align="center" type="selection"></el-table-column>
    <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
    <el-table-column align="center" label="策略名称" prop="name"></el-table-column>
    <el-table-column align="center" label="策略编号" prop="code" width="120"></el-table-column>
    <el-table-column align="center" label="归属部门">
      <template #default="{ row }">
        {{ adminStore.deptSelectList.find(item => item.id === row.deptId)?.name }}
      </template>
    </el-table-column>
    <el-table-column align="center" label="循环周期" prop="loopPeriod" width="100"></el-table-column>
    <el-table-column align="center" label="持续天数" prop="duration" width="100"></el-table-column>
    <el-table-column align="center" label="生效时间" prop="startDate"></el-table-column>
    <el-table-column align="center" label="终止时间" prop="endDate"></el-table-column>
    <el-table-column align="center" label="是否启用" prop="status">
      <template #default="{ row }">
        <!-- {{ row.status === '1' ? '启用' : '停用' }} -->
        <el-switch v-model="row.status" inline-prompt active-value="1" inactive-value="0" active-text="启"
          inactive-text="停" @change="handleStatusChange(row)" />
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作" width="240">
      <template #default="{ row }">
        <el-tooltip class="box-item" effect="dark" content="查看设备" placement="top-start">
          <el-button size="small" @click="handleViewDevices(row)">
            <span class="iconfont icon-chakanshebei" style="font-size: 12px; color:var(--el-color-primary);"></span>
          </el-button></el-tooltip>
        <el-tooltip class="box-item" effect="dark" content="查看项目" placement="top-start">
          <el-button size="small" @click="handleViewProject(row)">
            <span class="iconfont icon-chakanxiangmu" style="font-size: 12px; color:var(--el-color-primary);"></span>
          </el-button></el-tooltip>
        <el-tooltip class="box-item" effect="dark" content="编辑" placement="top-start">
          <el-button size="small" @click="handleEdit(row)"><el-icon style="color:var(--el-color-primary);">
              <Edit />
            </el-icon></el-button></el-tooltip>
        <el-tooltip class="box-item" effect="dark" content="删除" placement="top-start">
          <el-button size="small" @click="handleDelete(row)"><el-icon style="color:var(--el-color-danger);">
              <Delete />
            </el-icon></el-button>
        </el-tooltip>
      </template>
    </el-table-column>
    <template #empty>
      <el-empty description=" 暂无数据" />
    </template>
  </el-table>
  <el-pagination class="pagination" v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.pageSize"
    :page-sizes="[10, 20, 30, 40]" small background layout="total, sizes, prev, pager, next, jumper"
    :total="pageInfo.total" @change="init"></el-pagination>
  <el-drawer class="device-draw" v-model="deviceDrawVisiable" title="设备列表" size="50%">
    <el-table :data="deviceList" fit>
      <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
      <el-table-column align="center" label="设备名称" prop="deviceName"></el-table-column>
      <el-table-column align="center" label="设备编号" prop="deviceCode"></el-table-column>
      <el-table-column align="center" label="是否启用" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status === '1' ? 'success' : 'danger'">{{ row.status === '1' ? '启用' : '停用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" prop="remark"></el-table-column>
    </el-table>
    <template #footer>
      <el-button type="primary" @click="deviceDrawVisiable = false">关闭</el-button>
    </template>
  </el-drawer>
  <el-drawer v-model="projectDrawVisiable" title="项目列表" size="50%">
    <el-table :data="itemsList" fit>
      <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
      <el-table-column align="center" label="项目名称" prop="name"></el-table-column>
      <el-table-column align="center" label="项目内容" prop="content"></el-table-column>
      <el-table-column align="center" label="备注" prop="remark"></el-table-column>
    </el-table>
    <template #footer>
      <el-button type="primary" @click="projectDrawVisiable = false">关闭</el-button>
    </template>
  </el-drawer>
</template>
<script setup>
import { ref } from 'vue'
import { useAdminStore } from '@/stores';
import { getTactics, getTacticsDevices, getTacticsProject, delTacticsByIds, getTacticsBySearch } from '@/api/equipment/tactics'
import { changeTacticsStatus } from '@/api/equipment/tactics'
import { ElMessage } from 'element-plus';
import router from '@/router'
const adminStore = useAdminStore()
const props = defineProps({
  addPath: String,
  type: String,
})
// search
const searchModel = ref({
  name: '',
  startDate: '',
})
function reset() {
  searchModel.value = {
    name: '',
    startDate: '',
  }
  init()
}
async function searchSubmit() {
  console.log({ ...searchModel.value, ...pageInfo.value })
  await getTacticsBySearch({ ...searchModel.value, ...pageInfo.value }, props.type).then(res => {
    tacticsList.value = res.data.data.records
    pageInfo.value.total = res.data.data.total
    // console.log(res)
  })
}
async function handleBatchDelete() {
  console.log(tacticsListRef.value.getSelectionRows())
  if (tacticsListRef.value.getSelectionRows().length > 0) {
    let ids = tacticsListRef.value.getSelectionRows().map(item => item.id)
    await delTacticsByIds(ids).then(res => {
      init()
      ElMessage.success(res.data.data)
    })
  }
}
// table
const tacticsListRef = ref(null)
const tacticsList = ref([])
const status = ref('')
const pageInfo = ref({
  id: '',
  page: 1,
  pageSize: 10,
  total: ''
})
// 刷新页面list数据
async function init() {
  await getTactics(pageInfo.value, props.type).then(res => {
    console.log(res)
    tacticsList.value = res.data.data.records
    pageInfo.value.total = res.data.data.total
  })
}
init()
// 批量修改状态
async function handleBatchStatusChange() {
  console.log(tacticsListRef.value.getSelectionRows(), status)
  if (tacticsListRef.value.getSelectionRows().length > 0 && status.value) {
    let ids = tacticsListRef.value.getSelectionRows().map(item => item.id)
    await changeTacticsStatus(ids, status.value).then(res => {
      // emits('reload')
      init()
      ElMessage.success(res.data.data)
    })
  } else {
    ElMessage.error('未选择策略或未选择状态')
  }
}
// 单个修改状态
async function handleStatusChange(row) {
  console.log(row)
  let ids = [row.id]
  let status = row.status
  await changeTacticsStatus(ids, status).then(res => {
    if (res.data.success) {
      ElMessage.success(res.data.data)
    } else {
      ElMessage.error('修改失败，请重试')
      init()
    }
  })
}

const deviceDrawVisiable = ref(false)
const deviceList = ref([])
const projectDrawVisiable = ref(false)
const itemsList = ref([])
async function handleViewDevices(row) {
  await getTacticsDevices(row.id).then(res => {
    console.log(res)
    deviceList.value = res.data.data
    deviceDrawVisiable.value = true
  })
}
async function handleViewProject(row) {
  console.log(row)
  await getTacticsProject(row.projectId).then(res => {
    console.log(res)
    itemsList.value = res.data.data.itemsList
    projectDrawVisiable.value = true
  })
}
async function handleEdit(row) {

  router.push('/equipment/addludetactics/' + `${row.id}`)
}
async function handleDelete(row) {
  // let ids = [row.id]
  await delTacticsByIds(row.id).then(res => {
    console.log(res)
    ElMessage.success(res.data.data)
    init()
  })
}
</script>
<style scoped lang="less">
.search {
  height: 50px;
  background-color: var(--el-color-primary-light-8);

  .search1 {
    display: flex;
    justify-content: space-between;
    // margin: 20px 30px 10px;
    margin-left: 30px;
    vertical-align: middle;
  }

  .el-button {
    width: 80px;
  }

  .el-select {
    width: 150px;
  }

  .el-divider {
    height: 1.5rem;
    margin: 0 20px;
  }
}

.el-table {
  border-top: 1px var(--el-border-color) var(--el-border-style);
}

:deep(.el-form-item--small .el-form-item__label) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-form-item--small) {
  margin-bottom: 0;
}

.pagination {
  display: flex;
  justify-content: end;
  margin-top: 20px;
  margin-right: 50px;
}
</style>